// 搜索内容组件
<template>
    <div>
        <div class="box">
            <div class="title">
                <div class="title-left">
                    <i><el-icon>
                            <Search />
                        </el-icon></i>
                    <span>筛选搜索</span>
                </div>
                <div class="title-right">
                    <button @click="reSet">重置</button>
                    <button @click="Serach">查询搜索</button>
                </div>
            </div>
            <div class="tanxin">
                <div class="val" v-for="item, index in array" :key="item.title">
                    <span>{{ item.title }}:&emsp;</span>
                    <input v-if="!item.timeend" v-model="value[index]" type="text"
                        :list="item.havelist ? 'appNamelist' : ''" :placeholder="item.placeholder" @input="inputVal">
                    <datalist v-if="item.appNameList" id="appNamelist">
                        <option v-for="i in item.appNameList" :key="i">{{ i }}</option>
                    </datalist>
                    <el-date-picker v-if="item.timeend" v-model="value[index]" type="date" placeholder="请选择时间" size="default" />
                    &emsp;
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
defineProps<{
    array: Array<{ title: string, placeholder: string, havelist: boolean, [type: string]: any }>
}>()
let value = ref([])  // 绑定的数据 是数组

let inputVal = () => {
    console.log('输入了内容');
    console.log(value);
    
}
let reSet = () => {
    console.log('重置按钮');
}
let Serach = () => {
    console.log('搜索按钮');
}
</script>
 
<style lang="scss" scoped>
.box {
    margin: 10px auto 30px;
    background-color: white;
    box-shadow: 0px 0px 5px 0px rgb(96, 96, 96);
    padding: 30px 20px;
    min-width: 1160px;
    .title {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .title-left {
            display: flex;
            align-items: center;

            span {
                margin-left: 2px;
            }
        }

        .title-right {
            button {
                margin: 0 5px;
                padding: 6px 12px;
                border-radius: 3px;
                border: 1px solid #999;
                color: #333;
                cursor: pointer;

                &:nth-of-type(1):hover {
                    color: rgb(64, 158, 255);
                    border: 1px solid rgb(64, 158, 255);
                }

                &:nth-of-type(2) {
                    background-color: rgb(64, 158, 255);
                    color: white;
                    border: 1px solid white;
                }
            }
        }
    }

    .tanxin {
        display: flex;
        padding-top: 20px;
        padding-left: 40px;
        justify-content: flex-start;

        .val {
            font-size: 14px;
            color: #4a4a4a;
            display: flex;
            align-items: center;

            input {
                font-size: 14px;
                padding: 7px;
                text-indent: 0.5em;
                width: 200px;
                outline: none;
                border: 1px solid #d1d1d1;
                color: black;
                border-radius: 3px;

            }
        }
    }
}
</style>